<template>
  <div class="borrow-list-container">
    <div class="table-header">
      待归还的书籍
    </div>
    <div class="search-bar">
      <el-input style="width: 500px; margin: 10px;" placeholder="请输入图书编号" v-model="searchNumber"/>
      <el-button :icon="Search" circle @click="handleSearch" />
    </div>
    <div class="content">
      <LibraryGiveBackCard v-for="borrow in borrowList" :key="borrow.id" :borrow="borrow" :reload="reload" />
    </div>
    <div class="pagination">
      <el-pagination layout="prev, pager, next" background :current-page="pageIndex" :total="totalCount"
                     @current-change="handlePageChange" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { useApi } from "~/composeables";
import DepartmentCache from "~/store/system/departmentCache";
import { Search } from "@element-plus/icons-vue";

const props = defineProps<{
  count: 10,
}>();

const api = useApi();
const borrowList = ref<any>();
const pageIndex = ref(1);
const pageSize = ref(props.count);
const totalCount = ref(0);
const searchNumber = ref('');

const loadBorrowList = () => {
  api.rentRecordApi.filterData({ pageIndex: 1, pageSize: props.count, status: [1], identityKey:searchNumber.value })
    .then(res => {
      if (res.success) {
        borrowList.value = res.data.pageData;
        totalCount.value = res.data.totalCount;
        pageIndex.value = res.data.pageIndex;
      } else {
        ElMessage.error("拉取待归还清单失败");
      }
    })
    .catch(err => {
      console.error(err);
      ElMessage.error("网络请求失败");
    });
};

const reload = () => {
  window.location.href="/admin"
};

const handlePageChange = (page: any) => {
  pageIndex.value = page;
  loadBorrowList();
};


const handleSearch = ()=>{
  loadBorrowList();
}

onMounted(() => {
  nextTick(() => {
    DepartmentCache.update();
    loadBorrowList();
  });
});


defineExpose({reload})
</script>

<style scoped>
.borrow-list-container {
  width: 100%;
  height: calc(100vh - 65px - 45px - 45px - 100px);
}

.table-header {
  font-size: 1.5em;
  font-weight: bolder;
  padding-left: 10px;
  height: 35px;
}

.search-bar {
  height: 35px;
}

.content {
  width: 100%;
  height: calc(100vh - 45px - 45px - 35px - 35px - 45px - 45px);
  display: flex;
  overflow: scroll;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
}

.pagination {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.search-bar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}


</style>